<template>
  <div id="evaluate">
    <c-title :hide="false" text="售后列表"></c-title>
    <van-sticky> <van-search v-model="keyword" placeholder="搜索订单编号/售后编号" shape="round" @search="onSearch"> </van-search></van-sticky>
    <van-tabs v-model="activeName" @click="handleClick" sticky :ellipsis="false" offset-top="54">
      <van-tab :title="items.name" v-for="(items, ind) in titleArr" :key="ind">
        <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()"> -->
        <div class="list" v-if="dataList[ind] && !fun.isTextEmpty(dataList[ind].list)">
          <div class="list-child" v-for="(item, index) in dataList[ind].list" :key="index">
            <div class="list-item flex flex-sb">
              <div style="color: #333">{{ item.order.order_sn }}</div>
              <div style="color: #f14e4e; font-size: 12px">{{ item.status_name }}</div>
            </div>
            <div class="list-main flex flex-sb">
              <div class="img-scroll flex" style="flex: 1">
                <img v-for="(img, i) in item.refund_order_goods" :key="i" :src="img.goods_thumb" alt="" class="w-60" />
              </div>
              <div class="good-num">共{{ item.refund_order_goods.length }}件</div>
            </div>
            <div class="list-item flex flex-sb" style="font-size: 10px">
              <div style="color: #666">售后编号{{ item.refund_sn }}</div>
              <div style="color: #333; font-weight: bold">退款金额￥{{ item.apply_price }}</div>
            </div>
            <div class="list-item flex flex-sb" style="border-top: 1px solid #fbfbfb">
              <div style="color: #666">{{ item.refund_type_name }}</div>
              <div class="order-btn flex">
                <!-- <div class="order-btn-item" v-for="btn in item.button_models" :key="btn.value" @click.stop="operation(btn, { id: item.id })">{{ btn.name }}</div> -->
                <div class="order-btn-item" @click.stop="toDetail(item)">查看详情</div>
              </div>
            </div>
          </div>
        </div>
        <van-empty
          v-if="!$store.state.isloadding && fun.isTextEmpty(dataList[ind].list)"
          class="custom-image"
          image="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/energytank_blank@2x.png"
          description="暂无数据"
        />
        <!-- </van-list> -->
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import order_aftersaleslistcontroller from "./order_aftersaleslistcontroller";
export default order_aftersaleslistcontroller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
#evaluate {
  .flex {
    display: flex;
  }
  .flex-sb {
    justify-content: space-between;
    align-items: center;
  }
  .w-60 {
    width: 3.75rem;
  }
  .list {
    padding: 0.875rem;
    .list-child {
      text-align: left;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin-bottom: 0.75rem;
      padding: 0 0.9375rem;

      .list-item {
        line-height: 2.5rem;
      }
      .img-scroll {
        overflow: scroll;
        img {
          margin: 0 0.75rem 0 0;
          border-radius: 4px;
        }
      }
      .good-num {
        margin-left: 1rem;
        text-align: center;
        font-size: 10px;
        color: #999;
      }
      .order-btn {
        flex: 1;
        justify-content: flex-end;
        .order-btn-item {
          border: 1px solid #f14e4e;
          color: #f14e4e;
          border-radius: 1rem;
          line-height: 1.5rem;
          padding: 0 8px;
          margin-left: 0.625rem;
        }
      }
    }
  }
  .custom-image {
    ::v-deep .van-empty__image {
      width: 100%;
      height: auto;
    }
  }
}
</style>
